import Layout from '../../components/Layout';
export default Layout;

# Getting Started

Floating UI is a low-level library for positioning "floating"
elements like tooltips, popovers, dropdowns, menus and more.
Since these types of elements float on top of the UI without
disrupting the flow of content, challenges arise when positioning
them.

Floating UI exposes primitives which enable a floating element to
be positioned next to a given reference element while appearing
in view for the user as best as possible. Features include
overflow prevention (or collision awareness), placement flipping,
and more.

- **Tiny**: 600-byte core with highly modular architecture for
  tree-shaking
- **Low-level**: Hyper-granular control over positioning behavior
- **Pure**: Predictable, side-effect free behavior
- **Extensible**: Powerful middleware system
- **Platform-agnostic**: Runs on any JavaScript environment which
  provides measurement APIs, including the web and
  [React Native](/docs/react-native)

```shell
npm install @floating-ui/dom
```

```shell
yarn add @floating-ui/dom
```

## CDN

Floating UI can be used via the `unpkg` CDN by adding
`<script>{:html}` tags to your document before your own scripts:

```html
<script src="https://unpkg.com/@floating-ui/core@0"></script>
<script src="https://unpkg.com/@floating-ui/dom@0"></script>
```

> Important: you should open each link to retrieve the latest
> version to lock it to that version.

All exports will then be available on
`window.FloatingUIDOM{:js}`.

## Tutorial

Get up and running with a real practical example by creating a
[tooltip](/docs/tutorial).
